Floating orb css animation
CSS Animation
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0f0f1a;
overflow: hidden;
}
/* Animated orb */
.orb {
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #00f5ff, #6a00ff);
box-shadow: 0 0 40px #6a00ff, 0 0 80px #00f5ff;
animation: float 3s ease-in-out infinite, glow 2s infinite alternate;
}
/* Floating motion */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-40px); }
100% { transform: translateY(0px); }
}
/* Glow pulse */
@keyframes glow {
0% {
box-shadow: 0 0 20px #6a00ff, 0 0 40px #00f5ff;
filter: brightness(1);
}
100% {
box-shadow: 0 0 60px #6a00ff, 0 0 120px #00f5ff;
filter: brightness(1.3);
}
}
</style>
</head>
<body>
<div class="orb"></div>
</body>
</html>